<template>
  <view class="page">
    <Header :title="'思维导图'"></Header>
    <view class="main_container">
      <view class="main_content">
        <Breadcrumb :text="'个人评测-思维导图-' + periodName"> </Breadcrumb>
        <view class="content">
          <view class="list">
            <view class="list_content">
              <view
                class="item"
                :class="{
                  active: item.unLock !== -1,
                }"
                @click="details(item)"
                v-for="(item, index) in chapterList"
                :key="index"
              >
                <view class="item_img">
                  <image
                    v-if="item.unLock === -1"
                    src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/common/book-lock.png"
                    mode="widthFix"
                  />
                  <image
                    v-else
                    src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/common/book-unlock.png"
                    mode="widthFix"
                  />
                </view>
                <view class="item_text"> {{ item.chapterName }} </view>
                <view class="item_tips"> </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <Tips :show="showTips"></Tips>
  </view>
</template>

<script>
import { findChapterList } from "@/api/mindMap";
export default {
  components: {},
  data() {
    return {
      gradeId: "",
      periodName: "",
      chapterList: [],
      coverImage:
        "https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/mappingList1.png",
      coverImageLock:
        "https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/mappingList1_lock.png",
      showTips: false,
    };
  },
  onLoad(option) {
    this.gradeId = option.gradeId;
    this.init();
  },
  methods: {
    init() {
      let params = {
        id: this.gradeId,
      };
      findChapterList(params).then((res) => {
        this.chapterList = res.data;
        this.periodName = this.chapterList[0].periodName;
      });
      if (this.gradeId == "1") {
        this.coverImage =
          "https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/mappingList1.png";
        this.coverImageLock =
          "https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/mappingList1_lock.png";
      } else if (this.gradeId == "2") {
        this.coverImage =
          "https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/mappingList2.png";
        this.coverImageLock =
          "https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/mappingList2_lock.png";
      } else if (this.gradeId == "3") {
        this.coverImage =
          "https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/mappingList3.png";
        this.coverImageLock =
          "https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/mappingList3_lock.png";
      } else if (this.gradeId == "4") {
        this.coverImage =
          "https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/mappingList3.png";
        this.coverImageLock =
          "https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/mappingList4_lock.png";
      }
    },
    details(item) {
      if (item.unLock === -1) {
        this.showTips = true;
        setTimeout(() => {
          this.showTips = false;
        }, 2000);
        return;
      }
      uni.navigateTo({
        url: `/pages/mindMap/mindMapDetail?chapterId=${item.id}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./mindMapList";
</style>
